<template>
	<view class="animated fadeIn faster login">
		<view class="status-bar-height"></view>
		<view class="px-5" style="padding-top: 300rpx;">
			<view class="d-flex d-flex-column d-flex-middle">
				<image src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng64ba2110ce814897f3a91bb5ab5e8db89e9b92eccdfce2bbb0ac24c55a4df144" style="width: 96rpx;height: 96rpx;"></image>
				<view class="mt-4 mb-3">
					<text class="font48 color000">欢迎加入万域商友会</text>
				</view>
				<view class="mb-5">
					<text style="color: rgba(0,0,0,.7);">共享服务团队 结识万域商友</text>
				</view>
				<view class="login-input mb-5 d-flex d-flex-middle d-flex-between">
					<text class="iconfont icon-yonghu2 colorccc font30 mr-2"></text>
					<input class="d-flex-item" v-model="phone" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="colorhold"/>
					<view class="pl-3" v-if="phone.length>0" @click="phone=''">
						<text class="iconfont icon-cuowu1 colorhold font32"></text>
					</view>
				</view>
				<view class="login-input mb-5 d-flex d-flex-middle d-flex-between">
					<text class="iconfont icon-xinxi colorccc font30 mr-2"></text>
					<input class="d-flex-item" v-model="code" type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="colorhold"/>
					<view class="code-btn" @click="sendCode" :class="totalTime<60?'sending':''">{{codeBtnText}}</view>
				</view>
				<view class="login-btn bg-main d-flex d-flex-center d-flex-middle" @click="userLogin">
					<text class="font32 colorfff">登录/注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	import { userApi } from '@/http/userApi.js';
	export default {
		data() {
			return {
				totalTime: 60,
				timer: null,
				codeBtnText: '发送验证码',
				code: '' ,
				phone:'',
				userIndex:0,
				userList:[{
					"_id": "67ecf6203ad13a7977a95c97",
					"nickname": "陈之毅",
					"gender": 1,
					"avatar_file": {
						"url": "https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/avatar/avatar09.png?v=1"
					},
					"mobile": "13652548759",
					"mobile_confirmed": 0,
					"comment": "万众焊接有限公司",
					"tags": ["生产制造商"]
				}]
			}
		},
		onReady() {
		},
		methods: {
			async sendCode(){
				let that = this
				if(that.phone.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none',
					})
					return
					
				}
				if(that.totalTime == 60){
					try{
						uni.showLoading({
							title:'发送中'
						})
						let res=await userApi.sendCode(that.phone)
						console.log(res);
						uni.hideLoading()
						that.startTimer()
					}catch(e){
						uni.hideLoading()
						console.log('error',e)
					}
				}
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.codeBtnText = `${this.totalTime}s后发送`;
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.codeBtnText = '发送验证码';
						this.totalTime = 60
				    } else {
				        this.totalTime--;
				        this.codeBtnText = `${this.totalTime}s后发送`;
				    }
				}, 1000);
			},
			setUser(index){
				this.userIndex = index
			},
			userLogin(){
				let that = this
				if(that.phone == ''){
					return uni.showToast({
						title:'请输入手机号码！',
						icon:'none'
					})
				}
				if(that.phone.length != 11){
					return uni.showToast({
						title:'手机号码不正确！',
						icon:'none'
					})
				}
				if(that.code == ''){
					return uni.showToast({
						title:'请输入短信验证码！',
						icon:'none'
					})
				}
				uniIm.login(that.userList[0]).then((res) => {
					if(res && res.errorCode==0){
						// uni.reLaunch({
						// 	url:'/pages/index/index'
						// })
						// uni.switchTab({
						// 	url:'/pages/index/index'
						// })
						uni.navigateTo({
							url:'/pages/fill/fill'
						})
					}
				}).catch((error)=>{
					uni.showToast({
						title:'登录失败，请稍后重新登录',
						icon:"none"
					})
					console.log('error',error)
				})
			},
		}
	}
</script>

<style scoped>
.login{
	background: url('http://114.55.36.41/static/login-bg.png') no-repeat 0 0;
	background-size: 100% auto;
	height: 100vh;
}
.login-input{
	width: 588rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	height: 96rpx;
	border: solid 1px #eaeaea;
	border-radius: 4rpx;
}
.login-btn{
	height: 94rpx;
	width: 650rpx;
	border-radius: 50rpx;
}
.code-btn{
	color: #FF4A01;
}
.sending{
	color: #999;
	white-space: nowrap;
	letter-spacing: 0
}
</style>
